<template>
  <view v-if="carList.length === 2" class="shop-class" style="justify-content: space-around;flex-direction: column;"
    v-for="(item, index) in carList" :key="index">
    <view class="shop-class-item primary-g" @click="handleCheck(item, index)">
      <image :src="item.img" mode="widthFix"></image>
    </view>
  </view>
  <view v-else class="shop-class"
    :style="carList.length <= 3 ? 'justify-content: space-around;flex-direction: row;' : 'flex-direction: row;'">
    <view class="shop-class-item primary-g" @click="handleCheck(item, index)" v-for="(item, index) in carList">
      <image :src="item.img" mode="widthFix"></image>
    </view>
  </view>
</template>

<script setup lang="ts">
import { defineProps, defineEmits } from 'vue';

interface CarItem {
  id: number;
  img: string;
  carMake: string;
  classificationId: string;
}
const props = defineProps<{ carList: CarItem[] }>();
const emits = defineEmits(["prentCheck"]);

const handleCheck = (item: CarItem, index: number) => {
  uni.navigateTo({
    url: `/pages/carModel/index?carMakeId=${item.classificationId}&carMake=${item.carMake}`
  });
  emits("prentCheck", item, index);
};
</script>

<style scoped lang="scss">
@import "@/static/css/index.scss";

.shop-class {
  width: 94%;
  margin: 0 auto;
  padding: 30rpx 0;
  display: flex;
  // flex-direction: row;
  align-items: center;

  flex-wrap: wrap;
  background-color: $primary-f;
  border-radius: 24rpx;
  margin-top: 20rpx;

  .shop-class-item {
    width: 200rpx;
    min-height: 132rpx;
    display: inline-block;
    border: 3rpx solid #f4f4f4;
    border-radius: 10rpx;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: 10rpx;

    image {
      width: 160rpx;
      height: 100rpx;
    }
  }

  .shop-class-item:hover.primary-g {
    border: 1px solid $primary-g;
  }
}
</style>